<template>
    <div class="pageCommonContainerTitle" v-if="title">
        {{ title }}
    </div>
    <div class="courseNavContainer">
        <slot></slot>
        <div class="courseNavBox">
            <div @click="toggleIndex(index)" :class="activeIndex == index ? 'active' : ''" class="list"
                v-for="item, index in listItems" :key="item.name">
                {{ item.subjectName }}
            </div>
        </div>
    </div>
</template>
<script setup>
const emits = defineEmits(['toggleIndex'])
const props = defineProps({
    listItems: {
        type: Array,
        default: []
    },
    title: {
        type: String,
        default: '选课'
    }
})
const activeIndex = ref(0)
function toggleIndex(index) {
    if(activeIndex.value == index) return;
    activeIndex.value = index
    emits('toggleIndex', index)
}
function resetIndex(){
    activeIndex.value = 0
    emits('toggleIndex', 0)
}
defineExpose({
    activeIndex,
    toggleIndex,
    resetIndex
})
</script>

<style scoped>
.pageCommonContainerTitle {
    color: var(--gray_20);
    font-weight: 600;
    font-size: 24px;
    line-height: 40px;
}

.courseNavBox {
    flex: 1;
    display: flex;
    margin-top: 15px;
    flex-wrap: wrap;
}

.courseNavBox .list {
    color: var(--gray_20);
    font-weight: 300;
    font-size: 14px;
    padding: 6px 15px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.courseNavBox .list.active {
    border-radius: 20px;
    background: var(--gray_96);
    color: var(--green_n);
    font-weight: 600;
}
.courseNavContainer{
    display: flex;
}
</style>